<template>
  <vxe-modal
    v-model="visbled"
    :width="width"
    :height="height"
    show-footer
    :loading="loading"
    :id="id"
    :destroy-on-close="true"
  >
    <!-- 标题 -->
    <template #title>
      <slot slot="title" :nextNode="nextNode">{{ nextNode }}</slot>
    </template>
    <!-- 头部按钮 -->
    <template #corner v-if="corner">
      <slot slot="corner">
        <vxe-icon name="bell-fill"></vxe-icon>
        <vxe-icon name="minus"></vxe-icon>
      </slot>
    </template>
    <template #default>
      <slot
        name="default"
        :sqsx="sqsx"
        :sqsxid="sqsx['id']"
        :cyxpjlList="cyxpjlList"
        :job="job"
        :nextNodeDbrList="nextNodeDbrList"
        :nextNode="nextNode"
        :wjjlList="wjjlList"
        :whole="whole"
        :visbled="visbled"
        :change="GETFLOWCHANGEA"
      >
      </slot>
    </template>
    <template #footer>
      <slot name="footer">
        <div class="footer">
          <!-- 代办人 -->
          <!-- <div style="text-align: left; margin-bottom: 10px">
            <a-textarea
              style="width: 80vw; resize: none"
              v-model="opinion"
            ></a-textarea
            ><a-button @click="opinionModel = true">选择</a-button>
          </div> -->

          <vxe-button content="退回上一步" @click="senBack"> </vxe-button>
          <vxe-button content="保存" @click="save"> </vxe-button>
          <vxe-button
            status="primary"
            content="提交"
            @click="submit"
          ></vxe-button>
        </div>
      </slot>
    </template>
  </vxe-modal>
</template>
<!-- a:待审评 c:待考评 r:待复核 -->
<script>
import opinion from "@/views/everydayCheck/components/opinion";
import {
  queryJobByJobId,
  saveFlow,
  submitFlow,
  returnUpperFlowJob,
} from "../../api/dayPort";
export default {
  name: "every-modal",
  components: { opinion },
  provide() {
    return {
      queryFlow: this.getFlow, //流程请求
      sqsxid: this.SETFLOWID,
      _this: this, //当前对象
      data: this.$data, //当前组件data中的数据
      GETFLOWCHANGE: this.GETFLOWCHANGEA, //触发事件
      flowState: this.state,
      stasNextNodeDbrList: this.nextNodeDbrList,
    };
  },
  props: {
    model: {
      type: Boolean,
      default() {
        return false;
      },
    },
    corner: {
      type: Boolean,
      default() {
        return false;
      },
    },
    width: {
      type: String,
      default() {
        return "100vw";
      },
    },
    height: {
      type: String,
      default() {
        return "100vh";
      },
    },
    id: {
      type: String,
      default() {
        return "";
      },
    },
    ajax: {
      type: Object,
      default() {
        return {
          list: null,
        };
      },
    },
    state: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // 模态框
      visbled: false,
      opinionModel: false,
      sqsx: {}, //申请事项-基本信息数据
      cyxpjlList: [], //选派人员的评价数组
      job: {}, //当前流程任务基本信息
      nextNodeDbrList: [], //下环节待办人数组
      nextNode: "", //下一环节名称
      wjjlList: [], //相关文件记录
      whole: {}, //全部
      // 加载
      loading: false,
      jobId: "", // 请求数据流程id
      formData: {}, //提交保存接口
      currentNode: "", //当前环节
      fscms: "", //审查模式
      opinDbObj: {
        opinion: "", // 提交保存意见
        dbrid: "", //代办人id
        smgflag: "是", // 是否发送短信
      },
    };
  },
  computed: {},
  mounted() {},

  methods: {
    // 打开模态框
    handler(jobId = "") {
      this.jobId = jobId;
      this.getFlow();
    },
    // 请求数据
    async getFlow() {
      this.loading = true;
      let res = null;
      if (this.ajax["list"]) {
        //console.log(this.jobId, "axios");
        res = await this.ajax.list(this.jobId);
      } else {
        //console.log(this.jobId, "queryJobByJobId");
        res = await queryJobByJobId({ jobid: this.jobId });
      }
      if (res.success) {
        const { result } = res;
        if (!result) {
          this.$VxeMessage({ content: res.message, status: "warning" });
          return;
        }
        this.sqsx = result.sqsx;
        this.cyxpjlList = result.cyxpjlList;
        this.job = result.job;
        this.nextNodeDbrList = result.nextNodeDbrList;
        this.nextNode = result.nextNode;
        this.wjjlList = result.wjjlList;
        this.whole = result;
        this.loading = false;
        this.visbled = true;
      } else {
        this.$VxeMessage({ content: res.message, status: "error" });
      }
    },
    // 保存
    async save() {
      const formData = this.getFormDataParams();
      this.loading = true;
      const res = await saveFlow(formData);
      if (res.success) {
        this.$VxeMessage({ content: res.message, status: "success" });
        const { result } = res;
        if (!result) {
          this.$VxeMessage({ content: res.message, status: "warning" });
          return;
        }
        this.sqsx = result.sqsx;
        this.cyxpjlList = result.cyxpjlList;
        this.job = result.job;
        this.nextNodeDbrList = result.nextNodeDbrList;
        this.nextNode = result.nextNode;
        this.wjjlList = result.wjjlList;
        this.whole = result;
        this.loading = false;
      } else {
        this.$VxeMessage({ content: res.message, status: "error" });
        this.loading = false;
      }
    },
    // 提交
    async submit() {
      const formData = this.getFormDataParams();
      if (!formData.opinion) {
        this.$VxeMessage({ content: "请填写提交意见", status: "warning" });
        return;
      }
      if (!formData.dbrid) {
        this.$VxeMessage({ content: "请选择待办人", status: "warning" });
        return;
      }
      this.loading = true;
      const res = await submitFlow(formData);
      if (res.success) {
        this.$message.success(res.message);
        this.$emit("flow-refresh");
        this.loading = false;
        this.visbled = false;
      } else {
        this.$VxeMessage({ content: res.message, status: "error" });
        this.loading = false;
        this.visbled = false;
      }
    },
    // 退回流程
    async senBack() {
      const formData = this.getFormDataParams();
      this.loading = true;
      const res = await returnUpperFlowJob(formData);
      if (res.success) {
        this.$VxeMessage({ content: res.message, status: "success" });
        this.$emit("flow-refresh");
        this.loading = false;
        this.visbled = false;
      } else {
        this.$VxeMessage({ content: res.message, status: "error" });
        this.loading = false;
        this.visbled = false;
      }
    },
    // 请求参数对象
    getFormDataParams() {
      let formData = Object.assign({}, this.formData);
      formData.currentNode = this.currentNode;
      formData.jobid = this.jobId;
      formData.sqsxid = this.sqsx["id"];
      formData.nextNode = this.nextNode;
      formData = { ...formData, ...this.opinDbObj };
      return formData;
    },

    SETFLOWID() {
      return this.sqsx["id"];
    },
    GETFLOWCHANGEA(event) {
      this.opinDbObj = { ...this.opinDbObj, ...event };
    },
  },
  watch: {
    model: {
      immediate: true,
      deep: true,
      handler() {},
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  // display: flex;
  // justify-content: space-between;
  .dbr {
    display: flex;
    justify-content: space-between;
  }
  .rests {
    display: flex;
    justify-content: space-between;
  }
}
</style>
